Vuetify — Dividers

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Dividers

We can use dividers to divide content.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-card>
          <v-list two-line>
            <template v-for="(item, index) in items.slice(0, 6)">
              <v-divider v-if="item.divider" :key="index" :inset="item.inset"></v-divider>
              <v-list-item v-else :key="index">
                <v-list-item-avatar>
                  <img :src="item.avatar" />
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>
                  <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "title",
        subtitle: "subtitle",
      },
    ],
  }),
};
</script>

We add the v-divider component to divide the rows with the divider.

It’s flush with the v-list-item .

Vertical Dividers

We can add vertical dividers with the vertical prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-divider with the vertical prop to add the vertical divider.

It’s also flush with the toolbar.

Vertical Inset Dividers

We can use the inset prop to add margins with the divider:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical inset></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical inset></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Conclusion

We can add dividers for menu items and rows.